<template>
    <div class="_color">
        <div class="editProfile">
            <div class="editProfile_left">
                <div class="editProfile_right">
                    <img :src="headimg"/>
                </div>
                <div class="editProfile_left_jiange">
                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;display: inline-block;font-size: 20px;">姓名</span>
                    <input type="search" name="" style="display: inline-block;width: 70%;" class="form-control"
                           v-model="userName">
                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;display: inline-block;font-size: 20px;">账号</span>
                    <input type="search" name="" style="display: inline-block;width: 70%;" class="form-control"
                           v-model="account" disabled>
                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;display: inline-block;font-size: 20px;">邮箱</span>
                    <input type="search" name="" style="display: inline-block;width: 70%;" class="form-control"
                           v-model="email">
                    <span class="label label-info"
                          style="background-color: white;color: rgb(166,166,166);width: 20%;text-align: left;margin: 10px;display: inline-block;font-size: 20px;">电话</span>
                    <input type="search" name="" style="display: inline-block;width: 70%;" class="form-control"
                           v-model="telephone">
                </div>
            </div>

        </div>
        <div class="editProfile_down">
            <button type="button" style="width: 17.5%;margin:10px;" class="btn btn-large btn-block btn-primary"
                    @click="modify()">确定
            </button>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                account: '',
                email: '',
                telephone: '',
                userName: '',
                headimg: ''
            }
        },
        ready: function () {
            var _this = this;
            $.post('/api/planb/adminProFile').then(function (data) {
                _this.account = data.content.account;
                _this.email = data.content.email;
                _this.telephone = data.content.telephone;
                _this.userName = data.content.userName;
                _this.headimg = data.content.headimg;
            });
        },
        methods: {
            modify: function () {
                var _this = this;
                var args = {
                    "account": _this.account,
                    "email": _this.email,
                    "telephone": _this.telephone,
                    "userName": _this.userName,
                    "headimg": _this.headimg
                };
                $.post('/api/planb/modifyProFile', args).then(function (data) {
                    if (data.status == 'success') {
                        alert('修改成功');
                        window.location.reload();
                    } else {
                        alert('修改失败');
                    }
                });
            }
        }
    }
</script>

<style>
    body {
        background-color: #FFFFFF;
    }

    ._color {
        /*background-color: #FFFFFF;*/
    }

    .editProfile {
        /*background-color: #FFFFFF;*/
        /*  border: 1px #1e88e5 solid;
          border-radius: 5px;*/
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }

    .editProfile_left {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        /*多个也能放在两边*/
        justify-content: flex-start;
        align-items: center;
        /*background-color: yellow;*/
        border-radius: 10px;
        /*box-shadow:2px 2px 2px 2px grey;*/
    }

    .editProfile_left_jiange {
        /*background-color: green;*/
        border-radius: 10px;
        /*box-shadow:2px 2px 2px 2px grey;*/
        width: 40%;
        margin: 10px;
    }

    .editProfile_right {
        /*background-image: url('farm.jpg');*/
        /*background-position: center;*/
        /*background-size: cover;*/
        border-radius: 3px;
        /*box-shadow:1px 1px 1px 1px grey;*/
        margin: 10px;
        width: 230px;
        height: 230px;
    }

    .editProfile_right_img {
        margin: 10px;
        margin-right: 30px;
        /*background-color: pink;*/
        border-radius: 10px;
        box-shadow: 5px 5px 5px 5px grey;
        width: 30%;
    }

    .editProfile_down {
        margin: 10px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }
</style>